<template>
  <div>
    <div id="mapCon" style="width: 100%; height: 100%; position: absolute;">
      <span id="mouse-position"></span>
    </div>

    <!-- 图层控制 -->
    <el-card :class="{layerControl:true, noneCheckLayer: !checkLayerShow}">
      <div slot="header" class="clearfix">
        <span style=" font-size: 18px;line-height:27px">图层列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="checkLayerShow = !checkLayerShow">
          <i class="el-icon-arrow-down" v-show="!checkLayerShow" />
          <i class="el-icon-arrow-up" v-show="checkLayerShow" />
        </el-button>
      </div>
      <el-radio-group v-model="layer_radio" @change="tdLayerChange">
        <el-radio :label="1">天地图矢量图层</el-radio>
        <el-radio :label="2">天地图影像图层</el-radio>
        <el-radio :label="3">天地图地形图层</el-radio>
      </el-radio-group>
    </el-card>

    <!-- 条件查询 - 设置条件 -->
    <div class="conditionQueryBox" v-show="queryType == 'condition'">
      <el-form :model="conditionForm" :inline="true">
        <el-form-item>
          <el-input v-model="conditionForm.name" placeholder="请输入景区名称" :clearable="true" style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="conditionForm.province" placeholder="请选择景区所在地" :clearable="true" style="width: 230px">
            <el-option v-for="item in provinceOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="conditionForm.leval" placeholder="请选择景区等级" :clearable="true" style="width: 230px">
            <el-option v-for="item in levalOptions" :key="item.label" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-button @click="conditionQueryBtn">查询</el-button>
        <el-button @click="conditionResetBtn">重置</el-button>
      </el-form>
    </div>

    <!-- 条件查询 - 结果表格 -->
    <div class="condition-resultBox" v-drag v-show="queryType == 'condition' && resultBoxShow" style="width: 888px">
      <dv-border-box-8 :key="dvKey">
        <el-card class="result-card">
          <div style="overflow: hidden; user-select: none">
            <span style="float: left; font-size: 24px; line-height: 36px;">条件查询结果</span>
            <span style="float: right" @click="resultBoxClose">
              <i class="iconfont icon-close" style="font-size: 28px; line-height: 42px; margin-left: 8px;"></i>
            </span>
            <span style="float: right" @click="resultTableChange">
              <i :class="resultTableShow ? 'iconfont icon-shangjiantou' : 'iconfont icon-xiajiantou'" style="font-size: 28px; line-height: 42px"> </i>
            </span>
          </div>
          <div v-show="resultTableShow">
            <el-table :data="resultData" height="700" :empty-text="tableEmptyText">
              <el-table-column prop="name" label="景区名称" width="180"> </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
              <el-table-column label="所在地" width="150">
                <template slot-scope="scope">
                  <span v-text="getPlaceName(scope.row)"></span>
                </template>
              </el-table-column>
              <el-table-column prop="longitude" label="经度" width="100"> </el-table-column>
              <el-table-column prop="latitude" label="纬度" width="100"> </el-table-column>
              <el-table-column prop="leval" label="星级" width="100"> </el-table-column>
            </el-table>
            <div class="block" style="margin-top:8px">
              <el-pagination @size-change="tableSizeChange" @current-change="tableCurrentChange" :current-page.sync="tableCurrentPage"
                :page-sizes="[10, 20, 30]" :page-size.sync="tablePageSize" layout="total, sizes, ->, prev, pager, next, jumper" :total="tableTotal">
              </el-pagination>
            </div>
          </div>
        </el-card>
      </dv-border-box-8>
    </div>

    <!-- 空间查询 - 交互式几何查询按钮 -->
    <div class="spatial-btn" v-show="queryType == 'spatial'">
      <el-tooltip content="点查询" placement="top-start">
        <span class="btn" @click="spatialQueryBtn('Point')">
          <i class="iconfont icon-point"></i>
        </span>
      </el-tooltip>
      <el-tooltip content="圆查询" placement="top">
        <span class="btn" @click="spatialQueryBtn('Circle')">
          <i class="iconfont icon-circle"></i>
        </span>
      </el-tooltip>
      <el-tooltip content="拉框查询" placement="top">
        <span class="btn" @click="spatialQueryBtn('Square')">
          <i class="iconfont icon-rectangle"></i>
        </span>
      </el-tooltip>
      <el-tooltip content="多边形查询" placement="top">
        <span class="btn" @click="spatialQueryBtn('Polygon')">
          <i class="iconfont icon-polygon"></i>
        </span>
      </el-tooltip>
      <el-tooltip content="清空" placement="top-end">
        <span class="btn" @click="spatialClearBtn">
          <i class="iconfont icon-clear"></i>
        </span>
      </el-tooltip>
    </div>

    <!-- 空间查询 - 结果表格 -->
    <div class="spatial-resultBox" v-drag v-show="queryType == 'spatial' && resultBoxShow" style="width: 888px">
      <dv-border-box-8 :key="dvKey">
        <el-card class="result-card">
          <div style="overflow: hidden; user-select: none">
            <span style="float: left; font-size: 24px; line-height: 36px;">{{spatialResultTitle}}</span>
            <span style="float: right" @click="resultBoxClose">
              <i class="iconfont icon-close" style="font-size: 28px; line-height: 42px; margin-left: 8px;"></i>
            </span>
            <span style="float: right" @click="resultTableChange">
              <i :class="resultTableShow ? 'iconfont icon-shangjiantou' : 'iconfont icon-xiajiantou'" style="font-size: 28px; line-height: 42px"> </i>
            </span>
          </div>
          <div v-show="resultTableShow">
            <el-table :data="resultData" height="388" :empty-text="tableEmptyText">
              <el-table-column prop="name" label="景区名称" width="180"> </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
              <el-table-column label="所在地" width="150">
                <template slot-scope="scope">
                  <span v-text="getPlaceName(scope.row)"></span>
                </template>
              </el-table-column>
              <el-table-column prop="longitude" label="经度" width="100"> </el-table-column>
              <el-table-column prop="latitude" label="纬度" width="100"> </el-table-column>
              <el-table-column prop="leval" label="星级" width="100"> </el-table-column>
            </el-table>
            <div class="block" style="margin-top:8px">
              <el-pagination @size-change="tableSizeChange" @current-change="tableCurrentChange" :current-page.sync="tableCurrentPage"
                :page-sizes="[5, 10, 20]" :page-size.sync="tablePageSize" layout="total, sizes, ->, prev, pager, next, jumper" :total="tableTotal">
              </el-pagination>
            </div>
          </div>
        </el-card>
      </dv-border-box-8>
    </div>

    <!-- popup -->
    <div id="popup"
      style="position: relative; width: 300px; padding: 12px 12px 40px 12px; background-color: rgb(34, 52, 87 ); border-radius: 4px; user-select: none;">
      <!-- 关闭按钮 -->
      <div style="position:absolute;top:8px;right:8px; ;font-size:18px;" @click="closePopup">
        <i class="el-icon-close"></i>
      </div>
      <!-- 景区名称 -->
      <el-tooltip effect="dark" :content="popupData.name" placement="top">
        <div
          style="color:#ededed;font-size:28px;line-height:42px;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1;">
          {{popupData.name}}
        </div>
      </el-tooltip>
      <!-- 景区图片 -->
      <span v-show="popupData.img != null && popupData.img != ''">
        <img :src="popupData.img" :alt="popupData.name" style="text-align:center; width:276px" />
      </span>
      <div>
        <!-- 景区等级 -->
        <span v-show="popupData.leval != null && popupData.leval != ''"
          style="color: #ff6600; margin-right: 8px; font-size: 16px; line-height: 24px;">
          {{popupData.leval}}
        </span>
        <!-- 景区所在地 -->
        <span style="color:#cdcdcd;">[{{this.getPlaceName(this.popupData)}}]</span>
      </div>
      <!-- 景区地址 -->
      <div class="single-line" v-show="popupData.address != null && popupData.address != ''"
        style="color: #cdcdcd; font-size: 16px; line-height: 24px">
        地址：{{popupData.address}}
      </div>
      <!-- 景区描述 -->
      <div class="double-line" v-if="popupData.intro != null && popupData.intro != ''" style="color: #cdcdcd; font-size: 16px; line-height: 24px;">
        简介：{{popupData.intro}}
      </div>
      <!-- 点赞、收藏、评论按钮 -->
      <div style="position:absolute;bottom:2px;right:8px;">
        <!-- 点赞按钮 -->
        <span @click="like_click" v-show='!isLike'>
          <i class="iconfont icon-dianzan" style="font-size: 24px; line-height: 36px;"> </i>
        </span>
        <span @click="like_click" v-show="isLike">
          <i class="iconfont icon-dianzan" style="font-size: 24px; line-height: 36px; color:#1296db;"> </i>
        </span>
        <!-- 点赞数 -->
        <span v-show='popupData.like_num != null && popupData.like_num != 0' style="font-size: 16px; line-height: 24px">
          {{popupData.like_num}}
        </span>
        <!-- 收藏按钮 -->
        <span @click="collect_click" v-show='!isCollect' style="margin-left: 12px">
          <i class="iconfont icon-shoucang" style="font-size: 24px; line-height: 36px;"> </i>
        </span>
        <span @click="collect_click" v-show='isCollect' style="margin-left: 12px">
          <i class="iconfont icon-shoucang" style="font-size: 24px; line-height: 36px; color:#1296db"> </i>
        </span>
        <!-- 收藏数 -->
        <span v-show='popupData.collect_num != null && popupData.collect_num != 0' style="font-size: 16px; line-height: 24px">
          {{popupData.collect_num}}
        </span>
        <!-- 评论按钮 -->
        <span @click="comment_click" style="margin-left: 12px; margin-right: 8px">
          <i class="iconfont icon-pinglun" style="font-size: 24px; line-height: 36px;  "> </i>
        </span>
        <!-- 评论数 -->
        <span v-show='popupData.comment_num != null && popupData.comment_num != 0' style="font-size: 16px; line-height: 24px">
          {{popupData.comment_num}}
        </span>
      </div>

      <!-- 评论 drawer -->
      <div>
        <el-drawer :visible.sync="drawerShow" :modal="false" :with-header="false" direction="rtl" size="24%" :append-to-body="true">
          <!-- 总数 -->
          <div class="comment-total" v-show="popupData.comment_num != null && popupData.comment_num != 0">
            <span class="titlle">{{popupData.comment_num + "条评论"}}</span>
          </div>
          <!-- 输入一级评论 -->
          <div class="comment-head">
            <!-- 头像 -->
            <el-avatar :src="login_avatar"></el-avatar>
            <!-- 输入框 -->
            <div class="comment-input-box" style="margin-left:8px; width: 374px;">
              <el-input class="comment-input" v-model="first_comment_content" type="textarea" :rows="5" placeholder="说点什么吧...">
              </el-input>
              <el-button class="comment-btn" size="mini" @click="addComment()">评论</el-button>
            </div>
          </div>
          <!-- 评论列表 -->
          <div>
            <!-- 一级评论列表 -->
            <div class="comment-list" v-for="(item) in comment_list" :key='item.comment_id'>
              <!-- 一级评论 -->
              <div class="comment-item">
                <!-- 评论信息 -->
                <div class="comment-item-header">
                  <!-- 头像 -->
                  <el-avatar :src="item.user_all.avatar"></el-avatar>
                  <!-- 名字、时间 -->
                  <div class="info">
                    <span class="name">{{item.from_user_name}}</span>
                    <span class="time">{{new Date(parseInt(item.time)).toLocaleString()}}</span>
                  </div>
                  <!-- 删除、回复按钮 -->
                  <div class="tool">
                    <span @click="deleteComment(item)" v-show="isDeleteShow(item)">
                      <i class="iconfont icon-shanchu"> 删除</i>
                    </span>
                    <span @click="showReply(item)">
                      <i class="iconfont icon-huifu"> {{item.reply_show ? " 收起" : " 回复"}}</i>
                    </span>
                  </div>
                </div>
                <!-- 评论内容 -->
                <div class="comment-item-body">
                  <span class="content">{{item.content}}</span>
                </div>
                <!-- 回复框 -->
                <div style="padding-left: 46px; width: 420px;">
                  <div class="comment-input-box" v-show="item.reply_show">
                    <el-input :ref="item.comment_id" class="comment-input" v-model="second_comment_content" type="textarea" :rows="5"
                      :placeholder="'回复：'+item.from_user_name" style="width: 354px;">
                    </el-input>
                    <el-button class="comment-btn" size="mini" @click="addComment(item)">评论</el-button>
                  </div>
                </div>
              </div>
              <!-- 二级评论列表 -->
              <div style="padding-left: 46px;">
                <div v-if="item.children != null">
                  <div v-for="(item_second) in item.children" :key='item_second.comment_id'>
                    <!-- 二级评论 -->
                    <div class="comment-item">
                      <!-- 评论信息 -->
                      <div class="comment-item-header">
                        <!-- 头像 -->
                        <el-avatar :src="item_second.user_all.avatar"></el-avatar>
                        <!-- 名字、时间 -->
                        <div class="info">
                          <span class="name">{{item_second.from_user_name}}</span>
                          <span class="time">{{new Date(parseInt(item_second.time)).toLocaleString()}}</span>
                        </div>
                        <!-- 删除、回复按钮 -->
                        <div class="tool">
                          <span @click="deleteComment(item_second)" v-show="isDeleteShow(item_second)">
                            <i class="iconfont icon-shanchu"> 删除</i>
                          </span>
                          <span @click="showReply(item_second)">
                            <i class="iconfont icon-huifu"> {{item_second.reply_show ? " 收起" : " 回复"}}</i>
                          </span>
                        </div>
                      </div>
                      <!-- 评论内容 -->
                      <div class="comment-item-body">
                        <span class="reply-info">回复 </span>
                        <span class="reply-name">{{item_second.to_user_name}}</span>
                        <span class="reply-info"> :</span>
                        <span class="content">{{item_second.content}}</span>
                      </div>
                      <!-- 回复框 -->
                      <div style="padding-left: 46px; width: 374px;">
                        <div class="comment-input-box" v-show="item_second.reply_show">
                          <el-input :ref="item_second.comment_id" class="comment-input" v-model="second_comment_content" type="textarea" :rows="5"
                            :placeholder="'回复：'+item_second.from_user_name" style="width: 300px;">
                          </el-input>
                          <el-button class="comment-btn" size="mini" @click="addComment(item,item_second)">评论</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>

  </div>
</template>

<script src="./sceneryMap.js"></script>

<style src="./sceneryMap.scss" lang="scss" scoped></style>
